<template>
  <div class="login">
    <img class="backImage"
      :src="require('@/assets/Images/background/Login/background_1.png')"
      :style="loginBackImageStyle"
    >
    <el-card class="loginBack" body-style="padding: 0"
      :style="loginAreaStyle"
    >
      <el-container>
        <el-header class="loginHead">
          <span class="loginTitle">用户登录</span>
          <div class="adminSwitch">
            <el-tag size="small"
              :style="{
                fontFamily: FontMap.SH_Serif_Regular
              }"
              :type="adminLogin ? 'danger' : ''"
            >{{adminLogin ? '教职工' : '学生用户'}}</el-tag>&nbsp;&nbsp;<el-switch
            v-model="adminLogin"
            :width="35"
            :disabled="onLogin"
            active-color="#F56C6C"
            inactive-color="#409EFF"
          ></el-switch>
          </div>
        </el-header>
        <el-main class="loginMain">
          <el-input type="text"
            :input-style="loginInputStyle"
            v-model="accountPack.username"
            :placeholder="inputPlaceholder.accountTip"
            @focus="inputFocus .accountFocus = true"
            @blur="inputFocus .accountFocus = false"
          >
            <template #prefix>
              <i :class="adminLogin ? 'el-icon-s-custom' : 'el-icon-user' + ' inputPrefix'"></i>
            </template></el-input>
          <input-divider :type="inputBottomTipType.account"></input-divider>
          <div style="height: 50px"></div>
          <el-input
            type="password"
            :input-style="passwordInputStyle"
            v-model="accountPack.password"
            :placeholder="inputPlaceholder.passwordTip"
            @focus="inputFocus .passwordFocus = true"
            @blur="inputFocus .passwordFocus = false"
          >
            <template #prefix>
              <i class="el-icon-lock inputPrefix"></i>
            </template>
          </el-input>
          <input-divider :type="inputBottomTipType.password"></input-divider>
        </el-main>
        <el-footer class="loginFooter">
          <el-button
            :class="adminLogin ? 'loginTeach' : 'loginStu'"
            @click="sendLoginRequest"
            :disabled="onLogin"
          ><i class="el-icon-loading" v-if="onLogin"></i>登录</el-button>
        </el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script lang="ts">
import { reactive, computed, ref, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import inputDivider from '@/components/loginRegisterPage/login/inputDivider.vue'
import defaultLoginInputType from '@/assets/PublicStaticValue/views/loginRegisterPage/Login/defaultLoginInputType'
import clientSize from '@/assets/PublicStaticValue/ClientSize/clientSize'
import loginState from '@/assets/PublicStaticValue/AxiosCustomState/login/loginState'
import inputDividerType from '@/assets/PublicStaticValue/components/loginRegisterPage/Login/inputDividerType'
import account from '@/assets/PublicInterface/AxiosInterfaces/login/account'
import loginPack from '@/assets/PublicInterface/StoreInterfaces/CurrentAccount/loginPack'
import studentLogin from '@/assets/PublicFunction/AxiosFunctions/Login/studentLogin'
import teacherLogin from '@/assets/PublicFunction/AxiosFunctions/Login/teacherLogin'
import { ElMessage } from 'element-plus/lib'
import teacherInfo from '@/assets/PublicInterface/StoreInterfaces/CurrentAccount/teacherInfo'
import studentInfo from '@/assets/PublicInterface/StoreInterfaces/CurrentAccount/studentInfo'
import FontMap from '@/assets/Fonts/FontMap/FontMap'
// Test
// import getScore from '@/assets/PublicFunction/AxiosFunctions/getScore'
// Test
export default {
  name: 'Login',
  components: {
    inputDivider
  },
  setup () {
    const Store = useStore()
    const Router = useRouter()
    const accountPack = reactive({
      username: '',
      password: ''
    } as account)
    const loginBackImageStyle = reactive({
      opacity: 0,
      transform: 'translateX(0)'
    })
    const loginAreaStyle = reactive({
      transform: 'translateX(0)'
    })
    const clientWidthState = computed(() => Store.getters['ClientSize/getWidthState'])
    const loginInputStyle = reactive({
      ...defaultLoginInputType
    })
    const passwordInputStyle = reactive({
      ...defaultLoginInputType
    })
    const inputFocus = reactive({
      accountFocus: false,
      passwordFocus: false
    })
    const inputBottomTipType = computed(() => {
      var accountTip = inputDividerType.blur
      var passwordTip = inputDividerType.blur
      if (inputFocus.accountFocus) {
        if (accountPack.username.length === 0) {
          accountTip = inputDividerType.error
        } else {
          accountTip = inputDividerType.focus
        }
      } else { accountTip = inputDividerType.blur }
      if (inputFocus.passwordFocus) {
        if (accountPack.password.length === 0) {
          passwordTip = inputDividerType.error
        } else {
          passwordTip = inputDividerType.focus
        }
      } else { passwordTip = inputDividerType.blur }
      return {
        account: accountTip,
        password: passwordTip
      }
    })
    const inputPlaceholder = computed(() => {
      return adminLogin.value ? {
        accountTip: '请输入教职工号',
        passwordTip: '请输入教职工密码'
      } : {
        accountTip: '请输入学生学号',
        passwordTip: '请输入学号密码'
      }
    })
    const adminLogin = ref(false)
    onMounted(() => {
      setLoginBaseStyle(clientWidthState.value >= clientSize.screen_md)
    })
    const onLogin = ref(false)
    function setLoginBaseStyle (flag: boolean) {
      if (flag) {
        loginBackImageStyle.opacity = 1
        loginBackImageStyle.transform = 'translateX(-250px)'
        loginAreaStyle.transform = 'translateX(250px)'
      } else {
        loginBackImageStyle.opacity = 0
        loginBackImageStyle.transform = 'translateX(0px)'
        loginAreaStyle.transform = 'translateX(0px)'
      }
    }
    function handleFetch (resp: any) {
      console.log(resp.data)
      switch (resp.data.status_code) {
        case loginState.LOGIN_SUCCESSFUL: {
          ElMessage.success('登陆成功！')
          Store.dispatch('CurrentAccount/setCurrentAccount', {
            currentAccount: accountPack.username,
            infoPack: adminLogin.value ? {
              ...resp.data.tea
            } as teacherInfo : {
              ...resp.data.stu
            } as studentInfo,
            isTeacher: adminLogin.value
          } as loginPack)
          Router.replace(adminLogin.value ? '/teacher' : '/student')
          break
        }
        case loginState.ACCOUNT_NOT_FOUND: {
          ElMessage.error(`非${adminLogin.value ? '教职工' : '学生'}用户或账号不存在！`)
          break
        }
        case loginState.PASSWORD_ERROR: {
          ElMessage.error('密码错误！')
          break
        }
      }
      onLogin.value = false
    }
    function handleError (Error: any) {
      onLogin.value = false
      ElMessage.warning('エラー発生!' + Error.response)
    }
    function sendLoginRequest () {
      onLogin.value = true
      adminLogin.value ? teacherLogin(accountPack, handleFetch, handleError) : studentLogin(accountPack, handleFetch, handleError)
    }
    watch(clientWidthState, () => {
      setLoginBaseStyle(clientWidthState.value >= clientSize.screen_md)
    })
    return {
      loginInputStyle, passwordInputStyle, adminLogin, Store, loginBackImageStyle, loginAreaStyle, inputFocus, inputBottomTipType, accountPack, inputPlaceholder, sendLoginRequest, onLogin, FontMap
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/PublicStaticValue/ClientSize/clientSize";
@import "../../assets/Fonts/FontMap/FontMap";
@import "../../assets/Fonts/FontMap/FontList.css";
.login{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.backImage{
  position: absolute;
  transition: 0.5s;
}
.loginBack{
  position: absolute;
  max-width: $screen_xs;
  width: 100%;
  min-width: $screen_xs - 220px;
  border-radius: 0;
  transition: 0.5s;
}
.loginHead{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #DCDFE6;
  .loginTitle{
    position: absolute;
    left: 25px;
    font-size: 20px;
    font-family: $Mi_Lan;
    font-weight: bold;
  }
  .adminSwitch{
    position: absolute;
    right: 25px;
    height: 100%;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    span{
      font-weight: bold;
    }
  }
}
.loginMain{
  padding-top: 50px;
}
.inputPrefix{
  font-size: 16px;
}
$baseColor: #409EFF;
.loginStu{
  width: 100%;
  border: 1px solid $baseColor;
  background-color: $baseColor;
  color: white;
  font-size: 18px;
  font-family: $Mi_Lan;
  &:hover{
    background-color: white;
    color: $baseColor;
  }
}
.loginTeach{
  $baseColor: #F56C6C;
  width: 100%;
  border: 1px solid $baseColor;
  background-color: $baseColor;
  color: white;
  font-size: 18px;
  font-family: $Mi_Lan;
  &:hover{
    background-color: white;
    color: $baseColor;
  }
}
</style>
